---
import IconMdiCalendarMonthOutline from "~icons/mdi/calendar-month-outline";
import IconMdiEye from "~icons/mdi/eye";
import IconMdiCommentOutline from "~icons/mdi/comment-outline";
import IconMdiHeart from "~icons/mdi/heart";
import IconMdiFolderOutline from "~icons/mdi/folder-outline";
import IconMdiTag from "~icons/mdi/tag";
---

<div th:each="post : ${postItems}" class="post animated fadeInDown">
  <div class="post-title">
    <h3 class="font-medium">
      <a th:href="@{${post.status.permalink}}" th:text="${post.spec.title}"></a>
    </h3>
  </div>
  <div class="post-content text-black/50 text-sm">
    <p class="py-2.5" th:text="${post.status.excerpt}"></p>
  </div>
  <div class="post-info pb-[30px] border-b border-b-[#f2f2f2]">
    <div class="meta">
      <div class="info">
        <IconMdiCalendarMonthOutline class="w-3 h-3" />
        <span th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
        ></span>

        <IconMdiEye class="w-3 h-3" />
        <span th:text="${post.stats.visit}">0</span>
        <IconMdiCommentOutline class="w-3 h-3" />
        <a th:href="@{${post.status.permalink}}" th:text="${post.stats.comment}"
          >0</a
        >
        <div class="inline-block hover:text-red-700 cursor-pointer">
          <IconMdiHeart class="w-3 h-3" />
          <!-- <i class="iconify w-3 h-3" data-icon="mdi:heart-outline"></i> -->
          <span data-post-id-likes="" th:text="${post.stats.upvote}">0</span>
        </div>
        <th:block
          th:if="${not #lists.isEmpty(post.categories)}"
          class="inline-block"
        >
          <IconMdiFolderOutline class="w-3 h-3" />
          <a
            th:each="category : ${post.categories}"
            th:href="@{${category.status.permalink}}"
            th:title="${category.spec.displayName}"
            th:text="${category.spec.displayName}"
          >
          </a>
        </th:block>
        <th:block th:if="${not #lists.isEmpty(post.tags)}" class="inline-block">
          <IconMdiTag class="w-3 h-3" />
          <a
            th:each="tag : ${post.tags}"
            th:href="@{${tag.status.permalink}}"
            th:title="${tag.spec.displayName}"
            th:text="${tag.spec.displayName}"
          >
          </a>
        </th:block>
      </div>
    </div>
  </div>
</div>
